import React, { useEffect, useState } from 'react'
import { ToTopOutlined } from '@ant-design/icons'
import { Button, Modal, Form, Input, Cascader, Radio, Select, Space, DatePicker as TDatePicker } from 'antd';
import { GetUserGourp, GetUserLevel, GetUserTag, AddNewUser } from '@/apis/user';
const { SHOW_CHILD } = Cascader;
const DatePicker: any = TDatePicker

type Props = {
	shuaxin: any
}

const AddUser = ({ shuaxin }: Props) => {
	const [form] = Form.useForm();
	const [open, setOpen] = useState(false);
	const [level, setLevel] = useState([])
	const [group, setGroup] = useState([])
	const [tag, setTag] = useState([])
	const [Stag, setStag] = useState([])

	useEffect(() => {
		getLevel()
		getGroup()
		getTag()
	}, [])

	const showModal = () => {
		setOpen(true);
	};

	const handleOk = async () => {
		const value = form.getFieldsValue()
		console.log(value);
		const res = await AddNewUser({ ...value, tag_id_array: Stag })
		console.log(res);
		shuaxin()
		setOpen(false)
	};
	const handleCancel = () => { setOpen(false); };
	// 选择器渲染
	const getLevel = async () => {
		const res: any = await GetUserLevel({})
		setLevel(res.data)
	}
	const getGroup = async () => {
		const res: any = await GetUserGourp()
		setGroup(res.data)
	}
	const getTag = async () => {
		const res: any = await GetUserTag({ parent: 0 })
		// console.log(res.data);
		const data: any = tagOption(res.data)
		setTag(data)
	}
	const tagOption = (tag: any) => {
		return tag.map((item: any) => {
			if (item.children) {
				return { label: item.name, value: item._id, children: tagOption(item.children) }
			} else { return { label: item.name, value: item._id } }

		})
	}
	const onChange = (values: any) => {
		const list: any = []
		values.map((item: any) => {
			list.push(item[1])
		})
		console.log(list);
	}

	return (
		<>
			<Space>
				<Button style={{ fontSize: '10px' }} type="primary" onClick={showModal}>添加用户</Button>
				<Button style={{ fontSize: '10px' }}>发送优惠券</Button>
				<Button style={{ fontSize: '10px' }}>批量设置分组</Button>
				<Button style={{ fontSize: '10px' }}>批量设置标签</Button>
				<Button style={{ fontSize: '10px' }} icon={<ToTopOutlined />} >导出</Button>
			</Space>

			<Modal title="用户信息填写" open={open} onOk={handleOk}
				closable={false} okText='确认' cancelText='取消'
				destroyOnClose={true} onCancel={handleCancel}>
				<Form form={form} labelCol={{ span: 4 }}>
					<Form.Item name="real_name" label="真实姓名">
						<Input />
					</Form.Item>
					<Form.Item name="phone" label="手机号码">
						<Input />
					</Form.Item>
					<Form.Item name='birthday' label="生日">
						<DatePicker />
					</Form.Item>
					<Form.Item name="id_card" label="身份证号">
						<Input />
					</Form.Item>
					<Form.Item name="address" label="用户地址">
						<Input />
					</Form.Item>
					<Form.Item name="remarks" label="用户备注">
						<Input />
					</Form.Item>
					<Form.Item name="password" label="用户密码">
						<Input />
					</Form.Item>

					<Form.Item name='level_id' label='用户等级'>
						<Select options={(level || []).map((item: any) => ({ value: item._id, label: item.name }))} />
					</Form.Item>
					<Form.Item name='group_id' label='用户分组'>
						<Select options={(group || []).map((item: any) => ({ value: item._id, label: item.name }))} />
					</Form.Item>
					<Form.Item name='tag_id_array' label='用户标签'>
						<Cascader options={tag} onChange={onChange} multiple maxTagCount="responsive" showCheckedStrategy={SHOW_CHILD} />
					</Form.Item>

					<Form.Item name='is_promoter' label='推广资格' >
						<Radio.Group>
							<Radio value="1">启用</Radio>
							<Radio value="0">禁用</Radio>
						</Radio.Group>
					</Form.Item>
					<Form.Item name='status' label='用户状态' >
						<Radio.Group>
							<Radio value="1">开启</Radio>
							<Radio value="0">锁定</Radio>
						</Radio.Group>
					</Form.Item>

				</Form>
			</Modal>
		</>
	)
}

export default AddUser